import * as echarts from "echarts/core";
import { BarChart, LineChart, PieChart, GaugeChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import type { Ref } from "vue";
import "echarts/theme/macarons";

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  PieChart,
  GaugeChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

export function useCharts(labRef: Ref<HTMLElement>, initOption: any, theme = "macarons") {
  const chart = ref<echarts.ECharts>();
  const ec: echarts.ECharts = echarts.init(labRef.value, theme);
  ec.setOption(initOption);
  chart.value = ec;
  return chart;
}
